<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <link rel="stylesheet" href="./fonts//demo.css"> -->
  <link rel="stylesheet" href="/admin/fonts/iconfont.css">
  <link rel="stylesheet" href="/admin/lib/layui/css/layui.css" />
  <style>
    .space_slide {
      margin: 10px 20px 30px 20px;
    }

    #updateUserBox {
      display: none;
      width: 500px;
      height: 200px;
    }

    #updateUserBox .layui-input {
      width: 90%;
    }
  </style>
</head>

<body>

  <!-- <i class="iconfont icon-jiantou"></i> -->
  <div class="layui-card space_slide">
    <div class="layui-card-header">
      <span class="layui-breadcrumb">
        <a href="https://5aebf8b605931.t73.qifeiye.com/">首页</a>
        <a><cite>用户管理</cite></a>
      </span>
    </div>
    <div class="layui-card-body">
      <table class="layui-table" lay-even lay-skin="row" id="user_list" lay-size="lg">
      </table>
      <!-- 修改的弹出层 -->
      <div id="updateUserBox">
        <form class="layui-form" action="">
          <!--id  在页面中不显示 -->
          <input class="layui-input" name="id" type="hidden">
          <div class="layui-form-item">
            <label class="layui-form-label">权限</label>
            <div class="layui-input-block">

              <select name="userpower" lay-verify="required">
                <option value="">请选择用户等级</option>
                <option value="0">普通用户</option>
                <option value="1">VIP用户</option>
              </select>
            </div>
          </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="updateForm">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
      </form>
    </div>
</body>

</html>
<script src="/admin/lib/layui/layui.js"></script>

<script type="text/html" id="user_power">
  <div>
    <span onclick="updateShow('{{d.id}}','{{d.userpower?1:0}}')" class="layui-btn {{d.userpower?'layui-btn-danger':''}}"
      style="height: 27px;line-height: 27px;">{{d.userpower?"VIP会员":"普通会员"}}</span>
  </div>
</script>


<script type="text/html" id="operation">
  <div>
    <button type="button" onclick="updateUser('{{d.id}}')" class="layui-btn layui-btn-xs layui-btn-warm">修改</button>
    <button type="button" onclick="deleteUser('{{d.id}}')" class="layui-btn  layui-btn-xs layui-btn-danger">删除</button>
  </div>
</script>
<script type="text/html" id="remove">
  <div>
    <span type="button" class="layui-btn layui-btn-danger" onclick="deleteCheck()" style="margin-right: 20px;"><i
        class="layui-icon layui-icon-delete"></i> 批量删除</span>
    <div class="layui-input-inline">
      <!-- 搜索当成表单来做就好了 -->
      <!-- <button lay-submit lay-filter="*">提交</button>     -->
      <input type="text" name="search" placeholder="请输入用户账号" autocomplete="off" class="layui-input">
    </div>
    <button type="button" lay-submit lay-filter="search" class="layui-btn"><i class="layui-icon layui-icon-search"></i>
      查询</button>
  </div>
</script>





<script>
  var layer
  var $
  var layer
  var form
  var tableIns



  function updateUser(id) {
    // console.log(1);

    console.log(id);
    // 厚道前台的id 
    // 发起get请求
    $.get(`/admin/user/updateAll?id=${id}`, (res) => {
      var index = layer.open({
        type: 1,
        title: '修改用户数据',
        content: $('#updateUserBox') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
      });

      let data = res.data
      console.log(data);
      // 方法一:
      // 也可以DOM获取   元素js   表单对象.value

      // let nav_name = document.querySelector('[name=nav_name]')
      // let nav_alias = document.querySelector('[name=nav_alias]')

      // {nav_id: 1, nav_name: '网站首页', nav_alias: 'website homepage', nav_sort: 1, is_show: 1}
      // nav_name.value如果不赋值  就是获取这个对象 如果有=  那么就是赋值

      // nav_name.value = data.nav_name
      // nav_alias.value = data.nav_alias

      // 方法二:

      // jquery对象   jquery对象.val()
      // console.log($('[name=nav_name]'));
      // console.log($('[name=nav_alias]'));
      $('[name=id]').val(data.id)
      $('[name=username]').val(data.username)
      $('[name=password]').val(data.password)
      $('[name=userpower]').val(data.userpower)


      // 数据提交
      form.on('submit(updateForm)', (data) => {
        // data.field  是表单数据
        // console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
        console.log(data);
        $.ajax({
          url: '/admin/user/updateAll',
          type: 'post',
          data: data.field,
          dataType: 'json',
          success: (res) => {
            let {
              code,
              msg
            } = res
            if (code == 1) {
              // 关掉窗口
              layer.close(index)
              // 表格重载
              tableIns.reload()
            }
            layer.msg(msg)
          }
        })
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
      });
    })
  }
  // 操作中的删除按钮 点击删除
  function deleteUser(id) {
    layer.open({
      content: '确定要执行删除么?',
      btn: ['确定', '取消',],
      yes: function (index, layero) {
        //按钮【按钮一】的回调
        $.get(`/admin/user/delete?id=${id}`, (res) => {
          console.log(res);
          let {
            code,
            msg
          } = res
          if (code == 1) {
            tableIns.reload()
          }
          layer.msg(msg)
        })
      },
      btn2: function (index, layero) {
        //按钮【按钮二】的回调

        //return false 开启该代码可禁止点击该按钮关闭
      },


    });
  }


  function deleteCheck() {
    var checkStatus = table.checkStatus('user_list');
    var ids
    if (checkStatus.data.length > 0) {
      // 选中大于1
      var idsArray = [];
      for (var i = 0; i < checkStatus.data.length; i++) {
        idsArray.push(checkStatus.data[i].id);
      }
      ids = idsArray.toString();
      // console.log(ids);
      // layui.layer.alert(ids);

      var deleteIns = layer.confirm('您确认要将选中的全部删除么', {
        btn: ['删除', '取消'],
      }, function (index, layero) {
        $.ajax({
          type: 'get',
          data: {
            ids
          },
          url: '/admin/user/deletecheck',
          success: res => {
            if (res.code == 1) {
              tableIns.reload()
              layer.close(deleteIns)
            }
          }
        })
      }, function (index) {
        //按钮【按钮二】的回调
        console.log('no');
      });

      // $(".layui-form-checked").not('.header').parents('tr').remove();
    } else {
      layui.layer.alert("请至少选择一行");
    }
  }


  //注意：导航 依赖 element 模块，否则无法进行功能性操作
  //JS
  layui.use(['element', 'layer', 'util', 'laypage'], function () {
    var element = layui.element,
      layer = layui.layer,
      util = layui.util,
      $ = layui.$;
    var laypage = layui.laypage;
    //执行一个laypage实例

    //头部事件
    util.event('lay-header-event', {
      //左侧菜单事件
      menuLeft: function (othis) {
        layer.msg('展开左侧菜单的操作', {
          icon: 0
        });
      },
      menuRight: function () {
        layer.open({
          type: 1,
          content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
          area: ['260px', '100%'],
          offset: 'rt', //右上角
          anim: 5,
          shadeClose: true,
        });
      },
    });
  });
  layui.use(['laypage', 'layer'], function () {
    var laypage = layui.laypage,
      layer = layui.layer;

    //总页数低于页码总数
    laypage.render({
      elem: 'demo0',
      count: 100, //数据总数
      limit: 10
    });
  });

  layui.use(['element', 'layer', 'util', 'jquery', 'form', 'table'], function () {
    var {
      element,
      util
    } = layui
    $ = layui.$
    layer = layui.layer
    form = layui.form
    table = layui.table
    //  点击是否展示按钮修改其的值


    //头部事件
    util.event('lay-header-event', {
      //左侧菜单事件
      menuLeft: function (othis) {
        layer.msg('展开左侧菜单的操作', {
          icon: 0
        });
      },
      menuRight: function () {
        layer.open({
          type: 1,
          content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
          area: ['260px', '100%'],
          offset: 'rt', //右上角
          anim: 5,
          shadeClose: true,
        });
      },
    });
    // 数据表格
    tableIns = table.render({
      elem: '#user_list',
      url: '/admin/user/query',
      cols: [
        [{
          field: 'is_checkout',
          width: '10%',
          type: 'checkbox',
          fixed: 'left'
        }, {
          field: 'id',
          title: 'ID',
          width: '15%',
          sort: true,
        }, {
          field: 'username',
          title: '用户账号',
          width: '35%'
        }, {
          field: 'userpower',
          title: '用户级别',
          width: '15%',
          sort: true,
          templet: '#user_power'
        }, {
          field: 'experience',
          title: '操作',
          width: '25%',
          fixed: 'right',
          templet: '#operation'
        }]
      ],
      toolbar: 'default',
      cellMinWidth: 100, //每个单元格的最小宽度为100px
      loading: true, //加载数据的时候会有进度条
      title: '用户管理详情表',
      // totalRow: true,
      toolbar: '#remove',
      page: true,
      limits: [5, 10, 15, 20, 30, 50, 70, 80, 90, 100],
      limit: 10
    })



    // 表格的搜索功能
    form.on('submit(search)', function (data) {
      // console.log(data);
      // 发ajax请求 get方式
      // $.ajax({
      //   url: '/admin/nav/query',
      //   type: 'get',
      //   data: data.field,
      //   success: (res) => {
      //     console.log(res);
      //   }
      // })
      // 后台就收到了  { page: '1', limit: '10', search: 'asd' }

      // 使用表格的重载 就不需要
      tableIns.reload({
        where: { //设定异步数据接口的额外参数，任意设
          search: data.field.search,
        },
        page: {
          curr: 1 //重新从第 1 页开始
        }
      });
      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    })

    //监听提交
    form.on('submit(formDemo)', function (data) {
      layer.msg(JSON.stringify(data.field));
      return false;
    });

  });

</script>